7 Elements of a Winning Landing Page

7-fundamentals-of-landing-pages

Learn the basics and implement them to see improved conversion rates on your landing pages.

If landing pages didn’t exist and you were designing one for the very first time, what ingredients would you need to make your new creation a success?

On day 1 of our 7 Days to a Better Landing Page series, we’re going to take look at the anatomy of a landing page, and we’ll define the building blocks of a successful online marketing campaign.

The purpose of this first post is to define the types of content that you should consider for your landing pages. As we progress through the week we’ll build on this foundation piece by piece.

So grab some paper and a pen and sketch out a page for your next campaign as we step through the 7 elements. You’ll be surprised at how quickly you can create a basic page outline using this technique.

Our gallery of landing page templates show the elements applied to some different landing page layouts.

A Simple Example

This diagram represents a sample layout with the 7 elements placed in fairly standard locations. Your specific landing page may vary greatly, but it’s helpful to look at this for reference as we walk through each element.

A sample landing page layout showing placement of the 7 elements.

A sample landing page layout showing placement of the 7 elements.

1. The Unique Selling Proposition (USP)

The starting point of a marketing campaign often revolves around defining a point of differentiation. What is it about your product or service that sets it apart from the competition? Often, this has already been defined at a higher brand level and you just need to re-iterate it in a succinct way on your landing page. If not, this is your first task. Try to break down your offering to its most basic level, to describe the specific benefit your customers will get by choosing your product/service.

A classic example comes from Domino’s Pizza: “You get fresh, hot pizza delivered to your door in 30 minutes or less – or it’s free.”

A well crafted USP sets clear expectations for your customers and allows them to understand why they should care.

On your landing page, the USP should be delivered using a combination of the following page elements:

  • The primary headline: the Domino’s example above is a perfect illustration of a page headline.
  • Sub header: Sometimes you will need a secondary headline (typically smaller in size) that provides some clarification about the primary headline. Most commonly, this is used to allow the primary headline to be very short and punchy.

2. The Benefits

Following on directly from the USP is a more detailed description of your offer’s benefits and features. By crafting an effective headline you gained the attention of your customer, and now you have to provide a little more detail to the offer to answer any questions they may have. Try to focus on answering the question “What will this do for me?”, as this will help you to write copy that speaks directly to your customers questions.

It’s important to strike a balance here and not get into so much detail that your landing page feels like it’s full of text. Write a brief one paragraph summary and 3-5 bullet points for clarity. Come back to this section many times and edit the copy to remove any bloated or unnecessary verbiage.

3. The Hero Shot

The adage “a picture is worth a thousand words” is especially true in the short attention span world of the landing page. The hero shot is the visual representation of your offer and can help people to gain a better understanding of what it is or what it looks like. It will most commonly be one of these types of visual element:

  • A photograph of your product/service – preferably shown in it’s context of use (see point 4 below)
  • A diagram illustrating how it fits into the realm of an existing problem (like a series of steps)
  • A chart comparing it to the competition
  • A large graphic simply stating the numerical aspect of the offer – 200% Bonus, FREE, $100 off etc.

4. Context of Use

You should aim to showcase your product or service being used in real life. The idea here is to get your customers to empathize and place themselves in a scenario where they are using it. There are many ways in which to achieve this, including:

  • A photo: Consider an example of a collapsible step ladder. A standard white-background photo of the item would work for the hero shot, but to add extra effect you could provide supplementary photos of someone unfolding it, using it to reach somewhere high, and placing it neatly into a small cupboard afterward.
  • Video: While the camera never lies, video is an even more compelling way to showcase your product. Think of the common Shamwow and Slapchop commercials currently running. While cheesy, they impart a sense of need by illustrating direct benefits to everyday life.
  • Testimonials: Show that you already have customers, but keep them real.
  • Client lists: By listing known brand names that are using your service provides an implied sense of context and adds to the feeling of trust.

5. Request for data

It’s common – especially in the B2B marketplace – for the main purpose of your landing page to be lead generation. Usually this will involve asking the visitor for their Name and Email in exchange for some sort of freebie (we’ll be covering this in Thursday’s post). If you are requesting data from your customers, keep the form as short as possible and include a privacy statement near the button or email address field.

TIP: There is some thought and opinion on the placement of lead generation forms that suggests placing them on the right-hand side of the page yields higher conversions. This is likely due to the way westerners read from left to right. As such, placing the form on the left is akin to asking for something before explaining the benefits involved.

Read more about creating the perfect length lead gen form.

6. The Backup Plan

Not all visitors will become paying customers after the first kiss. To give you the opportunity for a little extra foreplay, leave a non-committal escape route from the page. This is what’s known as a Safety Net, and its purpose is to capture the attention of someone who is interested but not ready to buy. Examples include:

  • Follow us on Twitter: Once someone is following you on Twitter they can be exposed to your other marketing and brand messages, which may entice them to buy in the future.
  • Remind Me: Provide a way for them to be reminded (via email) at a predetermined time in the future (1 day, 1 week, 1 month, specific date etc.) and be sure to place a trust statement beside it that explicitly states that you will not contact them at any other time.
  • A Free Takeaway: Provide a link to a free download-able brochure (without having to complete a form).
  • Bookmark This Page: A classic technique that isn’t likely to yield great results as people don’t really check their bookmarks a a matter of process. It does however enable someone to find you again if they want to deal with you later on – especially important for standalone landing pages that are reached via an Ad they may never see again.

7. The Call To Action (CTA)

The final part of your landing page is the all important Call To Action or CTA. This is the statement or copy that instructs your visitor to take a specific action. Often it will be the button on a form, or a large graphical button that takes your new customer through to a final destination somewhere on your main website. It’s critical that the CTA is very obvious and is written in a way that describes what clicking on it will actually do.

Poorly written CTA’s are the standard CLICK HERE or SUBMIT. A good example would be “Get your $50 spa coupon” which clearly articulates what you will be receiving in exchange for your precious click.

For a more detailed look at CTA’s download our 101 Landing Page Tips eBook which contains 10 ways to make them more effective.

Wrapping Up

By now you should have an understanding of what a landing page needs to function. As I mentioned at the start, you can use these 7 elements of a landing page to quickly produce a napkin sketch or wireframe for a marketing campaign. On particularly good technique for visualizing landing page design potential is to create a paper prototype. Do a quick sketch of the 7 elements on a piece of paper, cut them out and move them around on a new piece of paper. Try to lay it out so that they tell a fluid story with a strong focus on the CTA.

Check back tomorrow for in part 2, where we’ll be looking at “7 Landing Page Inspirations in the Real World”, and how you can become a better marketer by observing marketing in everyday life.

Oli Gardner






Comments

  1. Priit says:

    Great article! Please post some screen shots of actual landing pages that follow these ideas.

  2. Excellent Article. Are there any statistics to show that the elements of this layout are in the optimum position? It’s always good to learn about the foundation behind the advice.

  3. [...] courtesey of a blog written by Gardner – Here are a couple of my favorite posts – 7 Elements of a Winning Landing Page and The 12-Step Landing Page Rehab Program – the topic that covers the infographic in this [...]

  4. frostwire says:

    Fantastic goods from you, man. I have understand your stuff previous to and you are just extremely excellent. I actually like what you’ve acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still take care of to keep it wise. I cant wait to read far more from you. This is really a tremendous website.

  5. [...] Oli Gardner over at Unbounce has been writing some really great articles on CRO and landing page testing. [...]

  6. [...] Oli Gardner over at Unbounce has been writing some really great articles on CRO and landing page testing. [...]

  7. [...] Oli Gardner over at Unbounce has been writing some really great articles on CRO and landing page testing. [...]

  8. Ralph says:

    There are a lot of ideas to improve and structure a landing page.

    Thank you for your great article.

  9. Thank you. This brief is a great starter reference as we design our landing page for a future online review site.

  10. Gary says:

    I realise this is quite old now but nevertheless was an interesting read. But the web does’nt stand still and I’d be interested to hear if the writer has developed or changed his views since publishing this article.

    • Oli Gardner says:

      You’re dead right. Here’s a couple of changes I’ve seen in the landing page evolution:

      1. People want Facebook landing pages because they need to convert visitors into fans. EPIC FAIL. There’s no way of testing or optimizing this yet.
      2. Secondary calls to action – depends on your purpose, but if it’s lead gen I’m much more for adding them into the confirmation page which is a great place to leverage goodwill.
      3. Mobile ready landing pages.

      That’s about it off the top of my head. Landing pages are changing all he time and the two biggest things happening are mobile and social media – without doubt.

  11. Jerrick says:

    i would prefer the backup plan go with the cross selling product o information that make them link to others ans substitute rather than showing the the facebook , twitter, bookmark and so on.

  12. [...] look into research around landing page design soon.  A lot has been written (including a great post by Oli Gardner on the 7 elements of a great landing page.) and Googling around will find you many showcases of [...]

  13. Matt says:

    Oil,

    Can you better explain the underlying psychology of why benefits (# 2) is in the position you recommend instead of switching it with the current position for the “hero shot” (# 3)? Thanks for your help as, at first glance, I would think that they should be swapped. Of course, I am open to changing my mind on this! Just wanted your opinions. Thanks.

    • Oli Gardner says:

      Hi Matt,
      If you are referring to placing it on the right vs. the left – the rationale is that most people read left to right (obviously you have to address different cultural needs appropriately). A strong visual will draw the eye in leaving it to wander across to the area containing the benefits and CTA.

      If you are thinking the benefits should be more prominent and take up more space – remember that this is a purely illustrative wireframe.

      It can depend a lot on the design you are using. If your USP is contained within the hero shot (quite common to have a statement overlaid on a photo/diagram) then you might have a larger hero shot/USP that is at the top – and then you can bring up the benefits into spot #3.

      Every layout will differ in some ways – often determined by the story you are trying to tell (either visually or through text).

  14. Dj Gear says:

    Many thanks for typically the auspicious writeup. Them in fact would have been a fun account the software. Start looking leading-edge to make sure you more further enjoyable within you! Having said that, exactly how should we relate?

  15. Katie Gaston says:

    Katie thinks this was an excellent article, has taken notes and is planning on using them to better her future personal / professional landing page setups! She would love to see some examples of what was described.

    She also finds talking in the third person a little uncomfortable but was compelled to comment due to Oli’s excellent 3rd person introduction on the top right of the page. ^.^

    Cheers. Looking forward to reading more.

  16. Links……

    [...]Sites of interest we have a link to[...]………

  17. [...] 7 Elements of a Winning Landing Page | Unbounce. About the authorChesley Powell [...]

  18. Timetastic says:

    The best blogs always stand the test of time. We’re just developing our first landing pages and this has been really useful.

    Cheers

  19. Anthony says:

    Freakin’ awesome blog post for anyone in the web design industry.

  20. marblemedia says:

    Great article! But don’t forget good solid content.

  21. Carl says:

    Great advice thanks Oli, as I’m redesigning the Companies website I can see this really coming in useful :)

  22. Textburst says:

    Great article thanks. The page structure, USP’s and the context of use sections were particularly helpful.

    I think the article is quite old now but I guess the better ones stand the test of time.

Leave a Reply

Segment Pixel